<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>学生考勤系统</title>
	<link rel="stylesheet" href="/plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="/plug/layui/css/default.css" />
</head>

<body class="layui-layout-body kit-theme-default">
<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo">
			<div class="layui-logo-toggle" id="blockBtn" kit-toggle="side" data-toggle="on">
				<i class="layui-icon">&#xe65a;</i>
			</div>
			<div class="layui-logo-brand">
				<a href="/index">学生考勤系统</a>
			</div>
		</div>
		<div class="layui-layout-right">
			<ul class="layui-nav">
				<li class="layui-nav-item" lay-unselect="">
					<a href="javascript:;" th:text="${user.username}"></a>
					<dl class="layui-nav-child">
						<dd><a href="javascript:systemSetting();">系统设置</a></dd>
						<dd><a href="/logout">退出</a></dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>
	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll">
			<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-unselect>
				<li class="layui-nav-item site-tree-noicon layui-this">
					<a href="javascript:;" data-id="100" data-title="首页" data-url=""
					   class="site-demo-active" data-type="tabAdd">
						<i class="layui-icon">&#xe68e;</i>
						<span>首页</span>
					</a>
				</li>
				<li class="layui-nav-item">
					<a class="" href="javascript:;" style="background-color: #505461;">
						<i class="layui-icon">&#xe656;</i>
						<span>系统管理</span>
					</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="javascript:;" data-id="7" data-title="管理员管理"
							   data-url="/admin/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>管理员管理</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="8" data-title="课程管理"
							   data-url="/curriculum/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>课程管理</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="9" data-title="年级/班级管理"
							   data-url="/gradeClass/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>年级/班级管理</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="10" data-title="教师/辅导员管理"
							   data-url="/teacher/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>教师/辅导员管理</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="11" data-title="学生管理"
							   data-url="/student/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>学生管理</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="12" data-title="请假审批"
							   data-url="/leave/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>请假审批</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="13" data-title="考勤记录"
							   data-url="/attendance/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>考勤记录</span>
							</a>
						</dd>
						<dd>
							<a href="javascript:;" data-id="14" data-title="晚点点名记录"
							   data-url="/nightSpot/list" class="site-demo-active" data-type="tabAdd">
								<i class="layui-icon">&#xe62e;</i>
								<span>晚点点名记录</span>
							</a>
						</dd>
					</dl>
				</li>
			</ul>
		</div>
	</div>

	<div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">
		<ul class="layui-tab-title"></ul>
		<div class="layui-tab-content"></div>
	</div>

	<div class="layui-footer" style="text-align:center;">
		© 学生考勤系统
	</div>
</div>
<script src="/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/plug/layui/layui.all.js"></script>
<script>
	function systemSetting() {
		layer.open({
			title: "系统设置",
			type: 2,
			area: ['800px', '600px'],
			fixed: false, //不固定
			content: "/systemSetting"
		});
	}
	layui.use(['element', 'layer', 'jquery'], function () {
		var element = layui.element;
		var $ = layui.$;
		$(function () {
			var dataid = $('.site-demo-active');
			active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
			active.tabChange(dataid.attr("data-id"));
		})
		$('.site-demo-active').on('click', function () {
			var dataid = $(this);
			if ($(".layui-tab-title li[lay-id]").length <= 0) {
				active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
			} else {
				var isData = false;
				$.each($(".layui-tab-title li[lay-id]"), function () {
					if ($(this).attr("lay-id") == dataid.attr("data-id")) {
						isData = true;
					}
				})
				if (isData == false) {
					active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
				}
			}
			active.tabChange(dataid.attr("data-id"));
		});

		var active = {
			tabAdd: function (url, id, name) {
				element.tabAdd('demo', {
					title: name,
					content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
							'" style="width:100%;height:99%;"></iframe>',
					id: id
				})
				FrameWH();
			},
			tabChange: function (id) {
				element.tabChange('demo', id);
			},
			tabDelete: function (id) {
				element.tabDelete("demo", id);
			}
		};

		function FrameWH() {
			var h = $(window).height() - 150;
			$("iframe").css("height", h + "px");
		}
	});
</script>
<script>
	var isShow = true;
	$('#blockBtn').click(function () {
		if (isShow) {
			$("#blockBtn i").html("<i class='layui-icon'>&#xe65b;</i>");
			$('.layui-side.layui-bg-black').css('display', 'none');
			$('.layui-tab').css('margin-left', '0px');
			$('.layui-footer').css('left', 0 + 'px');
			isShow = false;
		} else {
			$("#blockBtn i").html("<i class='layui-icon'>&#xe65a;</i>");
			$('.layui-side.layui-bg-black').css('display', 'block');
			$('.layui-tab').css('margin-left', '200px');
			$('.layui-footer').css('left', 200 + 'px');
			isShow = true;
		}
	});
</script>
</body>
</html>